<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools :show-before="true">
        <span slot="before">共{{ lists.total }}条记录</span>
        <template slot="after">
          <el-button size="small" type="warning" @click.native="$router.push('/import')">导入</el-button>
          <el-button size="small" type="danger" @click.native="exportEmploy">导出</el-button>
          <el-button size="small" type="primary" @click.native="showDialog = true">新增员工</el-button>
        </template>
      </page-tools>
      <!-- 放置表格和分页 -->
      <el-card>
        <el-table border :data="lists.rows">
          <el-table-column label="序号" sortable="" type="index" prop="index" />
          <el-table-column label="头像" sortable="" prop="staffPhoto">
            <template #default="{row}">
              <img v-imgerr :src="row.staffPhoto" alt="" srcset="" @click="showOR(row.staffPhoto)">
            </template>
          </el-table-column>
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment" :formatter="formEmploy" />
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="" prop="correctionTime">
            <template #default="{row}">{{ row.correctionTime |formatDate }}</template>
          </el-table-column>
          <el-table-column label="账户状态" sortable="" prop="enableState">
            <template #default="{row}">
              <el-switch
                v-model="row.enableState"
                active-color="#13ce66"
                inactive-color="#ff4949"
                disabled
                :active-value="1"
                :inactive-value="2"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="text" size="small" @click.native="$router.push(`/employees/detail/${row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click.native="torole(row.id)">角色</el-button>
              <el-button type="text" size="small" @click.native="del(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination layout="prev, pager, next" :total="lists.total" :page-size="pagesetting.size" :current-page="pagesetting.page" @current-change="currentchange" />
        </el-row>
      </el-card>
      <diaLog :show-dialog.sync="showDialog" />
      <el-dialog :visible="ishowQR" @close="outQR">
        <h3>扫一扫查看高清大图</h3>
        <canvas ref="canvas" />
      </el-dialog>
      <role ref="showrole" :showrole.sync="showrole" />
    </div>
  </div>
</template>
<script>
import { getsyslist } from '@/api/employees'
import { delEmploy } from '@/api/employees'
import employees from '@/api/constant/employees'
import { export_json_to_excel } from '@/vendor/Export2Excel'
import { formatDate } from '@/filters'
import diaLog from '@/views/employees/components/dialog.vue'
import role from '@/views/employees/components/role.vue'
import QRcode from 'qrcode'
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    diaLog,
    // eslint-disable-next-line vue/no-unused-components
    role
  },
  data() {
    return {
      lists: {},
      pagesetting: {
        page: 1,
        size: 10
      },
      showDialog: false,
      ishowQR: false,
      showrole: false
    }
  },
  created() {
    this.getlists()
    // setInterval(() => {
    // this.pagesetting.page = Math.ceil(this.lists.total / 10)
    //   if (this.lists.rows.length === 0) {
    //     this.pagesetting.page--
    //     this.getlists()
    //   } else {
    //     delEmploy(this.lists.rows[this.lists.rows.length - 1].id)
    //     this.lists.rows.splice(this.lists.rows.length - 1, 1)
    //   }
    // }, 100)
  },
  methods: {
    async  torole(id) {
      await this.$refs.showrole.getuserRole(id)
      this.showrole = true
    },
    showOR(url) {
      this.ishowQR = true
      this.$nextTick(() => {
        if (url) {
          QRcode.toCanvas(this.$refs.canvas, url)
        } else {
          QRcode.toCanvas(this.$refs.canvas, 'https://img0.baidu.com/it/u=633776498,2850305968&fm=11&fmt=auto&gp=0.jpg')
        }
      })
    },
    outQR() {
      this.ishowQR = false
    },
    async getlists() {
      this.lists = (await getsyslist(this.pagesetting)).data
    },
    formEmploy(row, col, cell) {
      if (cell) {
        const obj = employees.hireType.find(item => String(item.id) === String(cell))
        return obj.value ? obj.value : '聘用形式不明'
      }
      return '聘用形式不明'
    },
    currentchange(val) {
      this.pagesetting.page = val
      this.getlists()
    },
    async exportEmploy() {
      const res = (await getsyslist({ page: 1, size: this.lists.total })).data.rows
      const data = res.map(item => this.toChinese(item))
      console.log(data)
      this.exportexcel(data)
    },
    toChinese(user) {
      const newUser = []
      const header = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']
      const to = { '姓名': 'username', '手机号': 'mobile', '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName' }
      header.forEach(item => {
        const key = to[item]
        let value = user[key]
        if (key === 'formOfEmployment') {
          if (value) {
            value === 1 ? value = '正式' : value = '非正式'
          } else {
            value = '聘用形式不明'
          }
        }
        if (key === 'timeOfEntry') {
          if (value) {
            value = formatDate(value)
          } else {
            value = '时间不明'
          }
        }
        if (key === 'correctionTime') {
          if (value) {
            value = formatDate(value)
          } else {
            value = '时间不明'
          }
        }
        if (key === 'departmentName') {
          if (!value) {
            value = '未分配部门'
          }
        }
        newUser.push(value)
      })
      return newUser
    },
    exportexcel(data) {
      export_json_to_excel({
        header: ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门'],
        data,
        filename: '员工信息表',
        autoWidth: true,
        bookType: 'xlsx'
      })
    },
    async del(id) {
      await this.$confirm('要删除吗？')
      await delEmploy(id)
      this.$message.success('删除成功')
    }
  }
}
</script>
<style lang="scss" scoped>
img{
  width: 100%;
}
canvas{
  display: block;
  margin: 0 auto;
}
h3{
  text-align: center;
}
</style>
